﻿<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.ext.css" rel="stylesheet" />
<link href="../css/jqgrid/ui.jqgrid.css" rel="stylesheet" />
<link href="../css/style.min.css" rel="stylesheet" />
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/peity/jquery.peity.min.js"></script>
<script src="../js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="../js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
<script src="../js/plugins/layer/layer.min.js"></script>
<script src="../js/xlsx.full.min.js"></script>
<script src="../js/plugins/linq/linq.js"></script>
<style>
    .container {
        margin: 10px
    }

    .form-control {
        display: initial;
        width: auto;
        margin-right: 10px;
        padding: 0px;
        height: 25px
    }

    .pull-right {
        margin-right: 5px
    }

    #search-Provice,
    #search-City,
    #search-Part,
    #shopStr {
        max-width: 150px
    }

    .form-control {
        display: inline-block;
    }
</style>
<html>

<head>
    <title>店铺分组及目标</title>
</head>

<body>
    <div class="container" style="margin-top: 5px">
        <div class="row clearfix firstDiv">
            <label>筛选条件</label>
        </div>
        <div class="row clearfix secondDiv">
            <div class="col-sm-9 column">
                <label>零售分部:</label>&nbsp&nbsp
					<select class="form-control" id="search-OperationArea">
                        <option value="">请选择</option>
                    </select>
                <label>省份:</label>&nbsp&nbsp
					<select class="form-control" id="search-Provice">
                        <option value="">请选择</option>
                    </select>
                <label>区域经理:</label>&nbsp&nbsp
				    <select class="form-control" id="search-RegionalManager">
                        <option value="">请选择</option>
                    </select>
                <label>店经理:</label>&nbsp&nbsp
				    <select class="form-control" id="search-ShopManager">
                        <option value="">请选择</option>
                    </select>
                <label>输入店铺:</label>&nbsp&nbsp
					<input id="shopStr" type="text" data-projectcode="" class="form-control" />
            </div>
            <div class="col-sm-3 column">
                <button type="button" class="btn btn-sm btn-primary m-t-n-xs pull-right" id="import-Btn">导入</button>
                <button type="button" class="btn btn-sm btn-primary m-t-n-xs pull-right" id="search-Btn">查询</button>
                <input type="file" style="display: none" hidden="hidden" id="file-Btn" onunload='console.log("hi")' onchange="importf(this)">
            </div>
        </div>
        <div class="row clearfix thridDiv">
            <label>店铺分组及目标</label>
        </div>
        <div class="row clearfix">
            <div class="jqGrid_wrapper">
                <table id="shopTable">
                </table>
                <div id="pager_shopTable"></div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    var operationAreaName = "";
    var proviceName = "";
    var regionalManager = "";
    var shopManager = "";
    var shopStr = "";

    $(function() {
        $.jgrid.defaults.styleUI = "Bootstrap";

        $("#shopTable").jqGrid(options);
        

        $("#import-Btn").on("click", function () {
            $("#file-Btn").click();
        });

        //loadList();

        $(window).resize(function () {
            setArea();
        });

        var conditionsJson = {};
        //加载地区
        var loadConditionsList = function () {
            var s = layer.load(0, {
                shade: [0.2, '#fff'] //0.1透明度的白色背景
            });
            $.post("ShopPKHandler.ashx", {
                "action": "GetConditions",
            },
                function (data) {
                    var sProvice = $("#search-OperationArea");
                    if (data.Success == true) {
                        var sHtml = "";
                        conditionsJson = data.Data;
                        data.Data.map(function (item, i) {
                            sHtml += '<option value=' + item.OperationAreaName + '>' + item.OperationAreaName + '</option>';
                        });
                        sProvice.append(sHtml);
                    }
                    layer.close(s);
                });
        }
        loadConditionsList();

        $("#search-OperationArea").change(function () {
            var sProvice = $("#search-Provice");
            var sRegionalManager = $("#search-RegionalManager");
            var sShopManager = $("#search-ShopManager");
            var operationAreaName = $(this).children('option:selected').val();
            var children = Enumerable.From(conditionsJson).Where("d=>d.OperationAreaName=='" + operationAreaName + "'").First();

            var proviceHtml = "<option value=''>请选择</option>";
            children.provincesList.map(function (province, i) {
                proviceHtml += '<option value=' + province.ProvincesName + '>' + province.ProvincesName + '</option>';
            });
            sProvice.empty();
            sProvice.append(proviceHtml);

            var regionalManagerHtml = "<option value=''>请选择</option>";
            children.regionalManagerList.map(function (regionalManager, i) {
                regionalManagerHtml += '<option value=' + regionalManager.RegionalManager + '>' + regionalManager.RegionalManager + '</option>';
            });
            sRegionalManager.empty();
            sRegionalManager.append(regionalManagerHtml);

            var shopManagerHtml = "<option value=''>请选择</option>";
            children.shopManagerList.map(function (shopManager, i) {
                shopManagerHtml += '<option value=' + shopManager.ShopManager + '>' + shopManager.ShopManager + '</option>';
            });
            sShopManager.empty();
            sShopManager.append(shopManagerHtml);
        });
        //查询
        $("#search-Btn").on("click", function () {
            var e = window.event || event;
            operationAreaName = $("#search-OperationArea").find("option:selected").text();
            proviceName = $("#search-Provice").find("option:selected").text();
            regionalManager = $("#search-RegionalManager").find("option:selected").text();
            shopManager = $("#search-ShopManager").find("option:selected").text();
            shopStr = $("#shopStr").val();
            if (operationAreaName == "请选择") {
                operationAreaName = "";
            }
            if (proviceName == "请选择") {
                proviceName = "";
            }
            if (regionalManager == "请选择") {
                regionalManager = "";
            }
            if (shopManager == "请选择") {
                shopManager = "";
            }
            loadList();
        });

    });


    var options = {
        url: "ShopPKHandler.ashx?action=GetShopGroupAndTarget",
        mtype: "POST",
        datatype: "json",
        height: 700,
        altRows: true,
        altclass: 'altRowsColour',
        width: ($(".container").parents("html").width() - 20),
        autowidth: false,
        shrinkToFit: true,
        rownumbers: false,
        rowNum: 100,
        jsonReader: {
            root: function (obj) { return obj.Data.rows; },
            page: function (obj) { return obj.Data.pageindex; },
            total: function (obj) { return obj.Data.pagecount; },
            records: function (obj) { return obj.Data.total; },
            repeatitems: false,
        },
        postData: {
            "OperationAreaName": operationAreaName,
            "ProvincesName": proviceName,
            "RegionalManager": regionalManager,
            "ShopManager": shopManager,
            "ShopStr": shopStr,
        },
        colNames: ["店铺编号", "店铺名称", "零售分部", "省份", "区域经理", "店经理", "分组", "日期", "日目标", "月目标", "假日目标"],
        colModel: [
            {
                name: "ShopCode",
                index: "ShopCode",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "ShopName",
                index: "ShopName",
                width: 250,
                align: "center",
                sortable: false
            },
            {
                name: "OperationAreaName",
                index: "OperationAreaName",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "ProvincesName",
                index: "ProvincesName",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "RegionalManager",
                index: "RegionalManager",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "ShopManager",
                index: "ShopManager",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "GroupID",
                index: "GroupID",
                //width: 60,
                align: "center",
                sortable: false
            },
            {
                name: "TargetDate",
                index: "TargetDate",
                //width: 60,
                align: "center",
                sorttype: "date",
                formatter: "date",
                sortable: false
            },
            {
                name: "DayTarget",
                index: "DayTarget",
                //width: 60,
                align: "center",
                sortable: false,
                formatter: "integer"
            },
            {
                name: "MonthTarget",
                index: "MonthTarget",
                //width: 60,
                align: "center",
                sortable: false,
                formatter: "integer"
            },
            {
                name: "HolidayTarget",
                index: "HolidayTarget",
                //width: 60,
                align: "center",
                sortable: false,
                formatter: "integer"
            }
        ],
        pager: "#pager_shopTable",
        viewrecords: true,
        hidegrid: false,
        loadComplete: function () {
            addTableClass();
        }
    };

    function loadList() {
        options.postData = {
            "OperationAreaName": operationAreaName,
            "ProvincesName": proviceName,
            "RegionalManager": regionalManager,
            "ShopManager": shopManager,
            "ShopStr": shopStr,
        };
        $("#shopTable").jqGrid('setGridParam', options).trigger("reloadGrid");
    }

    function setArea() {
        var height = $(".container").parents("html").height() -
            $(".firstDiv").height() -
            $(".secondDiv").height() -
            $(".thridDiv").height() - 90;
        //重新计算容器高度
        var width = ($(".container").parents("html").width() - 20);
        $("#shopTable").setGridHeight(height);
        $("#shopTable").setGridWidth(width);
        $(".container .secondDiv").width(width);
        var colWidth = $(".container .secondDiv .col-sm-9").width() * 0.1;
        var colWidth2 = $(".container .secondDiv .col-sm-9").width() * 0.15;
        $("#search-OperationArea").width(colWidth);
        $("#search-Provice").width(colWidth);
        $("#search-RegionalManager").width(colWidth);
        $("#search-ShopManager").width(colWidth);
        $("#shopStr").width(colWidth2);
    }

    function addTableClass() {
        $("#shopTable").addClass("ui-common-table");
        $("#shopTable").addClass("table-bordered");
        $("#shopTable").addClass("table-striped");
        $(".ui-jqgrid-htable").addClass("ui-common-table");
        $(".ui-jqgrid-htable").addClass("table-bordered");
        $("#first_pager_shopTable span").addClass("glyphicon");
        $("#first_pager_shopTable span").addClass("glyphicon-step-backward");
        $("#prev_pager_shopTable span").addClass("glyphicon");
        $("#prev_pager_shopTable span").addClass("glyphicon-chevron-left");
        $("#next_pager_shopTable span").addClass("glyphicon");
        $("#next_pager_shopTable span").addClass("glyphicon-chevron-right");
        $("#last_pager_shopTable span").addClass("glyphicon");
        $("#last_pager_shopTable span").addClass("glyphicon-step-forward");
        $("#gview_shopTable th").css("text-align", "center");
        $("#gview_shopTable thead>tr").css("height", "30px");
        setArea();
    }

	/*
	    FileReader共有4种读取方法：
	    1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
	    2.readAsBinaryString(file)：将文件读取为二进制字符串
	    3.readAsDataURL(file)：将文件读取为Data URL
	    4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
	                 */
    var wb; //读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串

    function importf(obj) { //导入
        if (!obj.files) {

            return;
        }
        var s = layer.load(0, {
            shade: [0.2, '#fff'] //0.1透明度的白色背景
        });
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(data)), { //手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
            //wb.Sheets[Sheet名]获取第一个Sheet的数据
            var jsonData = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            var newData = replaceData(jsonData);
            importToDB(newData, s);
            $("#file-Btn").val("");
        };
        if (!FileReader.prototype.readAsBinaryString) {
            rABS = true;
        }
        else {
            rABS = false;
        }

        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }

    function importToDB(data, s) {
        $.post("ShopPKHandler.ashx", {
            "action": "ImportShopPermissionsList",
            "jsonData": data,
        },
            function (data) {
                layer.close(s);
                if (data.Success == true) {
                    layer.alert('导入成功！', {
                        icon: 1,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                    loadList();
                } else {
                    layer.alert(data.Message, {
                        icon: 1,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                }
            });
    }

    function fixdata(data) { //文件流转BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for (; l < data.byteLength / w; ++l)
            o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }

    function replaceData(data) {
        if (isContains(data, '"店铺代码"')) {
            data = data.replace(/"店铺代码"/g, '"ShopCode"');
        }
        if (isContains(data, '"店铺名称"')) {
            data = data.replace(/"店铺名称"/g, '"ShopName"');
        }
        if (isContains(data, '"日期"')) {
            data = data.replace(/"日期"/g, '"TargetDate"');
        }
        if (isContains(data, '"目标"')) {
            data = data.replace(/"目标"/g, '"DayTarget"');
        }
        if (isContains(data, '"零售分部"')) {
            data = data.replace(/"零售分部"/g, '"OperationAreaName"');
        }
        if (isContains(data, '"区域经理"')) {
            data = data.replace(/"区域经理"/g, '"RegionalManager"');
        }
        if (isContains(data, '"店经理"')) {
            data = data.replace(/"店经理"/g, '"ShopManager"');
        }
        if (isContains(data, '"省份"')) {
            data = data.replace(/"省份"/g, '"ProvincesName"');
        }
        if (isContains(data, '"分组"')) {
            data = data.replace(/"分组"/g, '"GroupID"');
        }
        return data;
    }

    function isContains(str, substr) {
        return str.indexOf(substr) >= 0;
    }
</script>
